<template>
  <div class="cont">
    <div class="common-content cont-main">
      <div class="top-search-bar">
        <el-form size="small" ref="queryForm" inline>
          <el-form-item prop="dates">
            <el-date-picker
                v-model="query.dates"
                placement="bottom-start"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                end-placeholder="结束日期"
                @change="changeDate">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="danger" @click="clearLog">清除</el-button>
            <el-button type="primary" @click="refresh">刷新</el-button>
          </el-form-item>
        </el-form>
      </div>

      <Table
          ref="table"
          :tableHeader="tableHeader"
          :tableData="tableData"
          columnType="selection"
          :max-height="tableMaxHeight"
          :pg-total-num="total"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange">
        <div slot="operation" slot-scope="row">
          <i class="el-icon-tickets table-btn" @click="logInfo(row)" title="日志详情"></i>
        </div>
      </Table>
    </div>

    <Dialog
        :addNewVisible="InfoVisible"
        @closeDia="closeDia"
        width="800px"
        :center="true"
        title="日志详情">
      <div slot="body" class="log-info-group">
        <el-table
            class="yt-table"
            :data="infoList"
            max-height="400px"
            border
            style="width: 100%">
          <el-table-column
              prop="name"
              label="参数名："
              width="100px"
              align="right">
          </el-table-column>
          <el-table-column prop="data" label="参数值"></el-table-column>
        </el-table>
      </div>
    </Dialog>

    <!--日志详情-->
    <LogDetailsDailog ref="logDetailsDailog"></LogDetailsDailog>
  </div>
</template>

<script>
import {get_deleteByDate, get_OptLog, get_OptLogByid} from "@/apis/log/log";
import Table from "@/components/Table";
import Dialog from "@/components/Dialog/Dialog";
import LogDetailsDailog from "./comp/LogDetailsDailog";

export default {
  name: "Operlog",
  aside: 'comp/CompAside',
  components: {Table, Dialog, LogDetailsDailog},
  directives: {},
  data() {
    return {
      topinput: "",
      value1: "",
      tableHeader: [
        {prop: "userName", name: "操作人", width: 80},
        {prop: "resIp", name: "请求IP", width: 120},
        {prop: "resUri", name: "请求地址", align: 'left', tooltip: true, minWidth: 100},
        {prop: "useTime", name: "耗时(ms)", width: 80},
        {prop: "methodName", name: "请求方法", align: 'left', tooltip: true, minWidth: 200},
        {prop: "uriDesc", name: "操作内容", align: 'left', tooltip: true, minWidth: 100},
        {prop: "eptInfo", name: "	异常信息", align: 'left', tooltip: true, minWidth: 100},
        {prop: "beginTime", name: "开始时间", width: 150},
        {prop: "endTime", name: "结束时间", width: 150},
        {prop: "opt", name: "操作", slot: true, width: 100}
      ],
      tableMaxHeight: '',
      tableData: [],
      total: 0,
      pageSize: 1,
      pageNum: 10,
      InfoVisible: false,
      infoList: [],
      query: {
        dates: ""
      }
    };
  },

  mounted() {
    this.getLogList();
    this.$nextTick(() => {
      this.tableMaxHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50 - 30 - 48 + 'px'
    })
  },

  methods: {
    // 获取全部日志
    getLogList(val = {}) {
      get_OptLog(
        Object.assign(
          {},
          {pageSize: this.pageSize, pageNum: this.pageNum},
          val
        )
      ).then((res) => {
        if (res.data.code != 0) return;
        let {data} = res.data;
        this.total = data.total;
        data.records.forEach((item) => {
          item.isHover = false;
        });

        if (data.records.length === 0 && this.pageSize > 1) {
          this.pageSize--;
          this.getUserList();
        }
        this.tableData = data.records;
      });
    },
    changeDate() {
      if (this.query.dates) {
        this.getLogList({
          beginTime: this.query.dates[0] || null,
          endTime: this.query.dates[1] || null,
        });
      } else {
        this.getLogList();
      }
    },
    // 查询所选时间日志
    search() {
      if (this.query.dates) {
        this.getLogList({
          beginTime: this.query.dates[0] || null,
          endTime: this.query.dates[1] || null,
        });
      } else {
        this.getLogList();
      }
    },
    // 刷新
    refresh() {
      this.$refs.queryForm.resetFields();
      this.getLogList();
    },
    // 删除时间段内的日志
    clearLog() {
      if (!this.query.dates) {
        return this.$message.warning("请先选择时间范围！");
      }
      this.$confirm(`清除${this.query.dates[0]}至${this.query.dates[1]}的日志数据，是否继续?`, "删除操作日志", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
        confirmButtonClass: 'el-button--danger'
      }).then(() => {
        get_deleteByDate({
          beginTime: this.query.dates[0],
          endTime: this.query.dates[1],
        }).then((res) => {
          let {data} = res;
          this.getLogList();
          this.$message.success(data.msg);
        });
      }).catch(() => {

      });
    },
    // 查看日志详情
    logInfo(row) {
      // 获取日志详情信息
      get_OptLogByid({id: row.data.id}).then((res) => {
        this.$refs.logDetailsDailog.show([
          {name: '请求IP', data: res.data.data.resIp || '--'},
          {name: '请求地址', data: res.data.data.resUri || '--'},
          {name: '操作内容', data: res.data.data.uriDesc || '--'},
          {name: '请求方法', data: res.data.data.methodName || '--'},
          {name: '请求参数', data: res.data.data.rqsParams || '--'},
          {name: '异常信息', data: res.data.data.eptInfo || '--'},
          {name: '请求耗时', data: res.data.data.useTime || '--'},
          {name: '操作人', data: res.data.data.userName || '--'},
          {name: '开始时间', data: res.data.data.beginTime || '--'},
          {name: '结束时间', data: res.data.data.endTime || '--'}
        ])
      });
    },
    closeDia() {
      this.InfoVisible = false;
      this.infoList = [];
    },
    handleSizeChange(val) {
      this.pageNum = val;
      this.getLogList();
    },
    handleCurrentChange(val) {
      this.pageSize = val;
      this.getLogList();
    }
  },
};
</script>

<style lang="less" scoped>
  .cont {
    width: 100%;
    padding: 15px;
    height: 100%;
    overflow: hidden;

    .cont-main {
      height: 100%;
      padding: 15px;
      overflow: hidden;
    }
  }
</style>
